<!-- 运费管理 -->
<template>
  <div class="dashboard-container waybill-list customer-list-box">
    <el-card class="box-card">
      <el-button
        type="warning"
        class="el-button"
        @click="addList"
      >新增模板</el-button>
      <div>
        <!-- 表格 -->
        <el-table
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            prop="templateType"
            label="模板类型"
            width="180"
            :formatter="enumerate"
          >

          </el-table-column>
          <el-table-column
            prop="transportType"
            label="运送类型"
            width="180"
            :formatter="transport"
          >
          </el-table-column>
          <el-table-column
            prop="associatedCityList"
            label="关联城市"
            width="180"
          >
            <template #default="{row}">
              <span
                v-for="(item,index) in row.associatedCityList"
                :key="index"
              >
                {{ city[item] }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="firstWeight"
            label="首重"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="continuousWeight"
            label="续重"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="lightThrowingCoefficient"
            label="轻抛系数"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop=""
            label="操作"
            width="180"
          >
            <template #default="{row}">
              <el-button
                type="text"
                @click="redact(row.id)"
              >编辑</el-button>
              <el-button
                type="text"
                style="color: red;"
                @click="del(row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 弹窗 -->
        <FreightAdd
          :id="id"
          :dialog-visible="dialogVisible"
          @father-app="children"
          @dialog-visible="closeProgram"
        ></FreightAdd>
      </div>
    </el-card>
  </div>
</template>

<script>
import { freightManageList, freightManageDelete } from '@/api/transit'
import FreightAdd from './components/freight-add.vue'
import { formtemplateType, transportType } from '@/api/branchidname'

export default {
  name: 'FieightManger',
  components: {
    FreightAdd
  },
  data() {
    return {
      tableData: [],
      id: '',
      dialogVisible: false,
      list: {
        id: '', // 主键
        templateType: '', // 模板类型
        transportType: '', // 运送类型
        associatedCityList: '', // 关联城市
        firstWeight: '', // 首重价格
        continuousWeight: '', // 续重价格
        lightThrowingCoefficient: '', // 轻抛系数
        created: '', // 创建时间
        updated: '', // 更新时间
        expense: '', // 运费
        computeWeight: '' // 计算重量
      },
      city:
        {
          '1': '全国',
          '2': '京津冀',
          '3': '江浙沪',
          '4': '川渝',
          '5': '黑吉辽'
        }
    }
  },
  mounted() {
    this.listData()
  },

  methods: {
    // 渲染页面
    async listData() {
      const res = await freightManageList()
      console.log(res)
      this.tableData = res.data
    },
    // 枚举
    enumerate(row) {
      const item = formtemplateType.find(item => item.id === row.templateType)
      return item.name
    },
    transport (row) {
      const item = transportType.find(item => item.id === row.transportType)
      return item.name
    },
    // 点击新增
    addList() {
      this.dialogVisible = true
    },
    // 删除
    async del(id) {
      await this.$confirm('此操作将永久删除该模板, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await freightManageDelete(id)
        this.$message.success('删除成功')
        this.listData()
      }).catch((error) => {
        console.log(error)
        this.$message('删除失败')
      })
    },
    closeProgram(row) {
      this.dialogVisible = row
    },
    children() {
      this.listData()
    },
    // 点击编辑
    async redact(id) {
      this.dialogVisible = true
      this.id = id
    }
  }
}

</script>

<style lang="scss" scoped rel="stylesheet/scss">
.waybill-list {
  .el-dialog__wrapper {
    ::v-deep  .el-dialog__body {
      padding-left: 0px;
    }
  }
}
.customer-list-box{
  padding: 20px;
}
.el-button{
  margin:20px 20px 20px 0px;
}
</style>
